<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            margin: 100px auto;
            text-align: center;
            width: 400px;
            height: 500px;
            background-color: brown;
        }

        .head {
            padding: 50px 0;
            color: white;
        }

        h1 {
            padding: 40px 0;
            color: aliceblue;
        }

        .content {
            padding: 40px 0;
            color: aliceblue;
        }

        .last {
            padding-top: 90px;
            color: aliceblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="head">现在的时间：</div>
        <h1>
            倒计时
        </h1>
        <div class="content">
            2
        </div>
        <div class="last">
            截止时间: 2024年10月29日 10:00:00
        </div>
    </div>
    <script>
        const head = document.querySelector('.head')
        const content = document.querySelector('.content')
        const last = document.querySelector('.last')

        function getCountdown() {

            const now = +new Date()
            const future = (+new Date('2024-10-29 10:00:00'))
            const t = (future - now) / 1000
            d = parseInt(t / 60 / 60 / 24)
            h = parseInt(t / 60 / 60 % 24)
            m = parseInt(t / 60 % 60)
            s = parseInt(t % 60)
            d = d < 10 ? '0' + d : d
            h = h < 10 ? '0' + h : h
            m = m < 10 ? '0' + m : m
            s = s < 10 ? '0' + s : s
            return `${d}天${h}小时${m}分${s}秒`
        }
        content.innerHTML = getCountdown()
        setInterval(function () {
            content.innerHTML = getCountdown()
        }, 1000);
        function getTime() {
            const date = new Date()
            year = date.getFullYear() > 9 ? date.getFullYear() : '0' + date.getFullYear()
            month = date.getMonth() > 9 ? date.getMonth() : '0' + date.getMonth()
            day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
            hour = date.getHours() > 9 ? date.getHours() : '0' + date.getHours()
            minute = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()
            second = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()
            return `${year}年${+month + 1}月${day}日 ${hour}:${minute}:${second}`
        }
        head.innerHTML = `现在的时间：${getTime()}`
        setInterval(function () {
            head.innerHTML = `现在的时间：${getTime()}`
        }, 1000);
    </script>
</body>

</html>